<template>
    <div class="goods-container">
        <div class="goods-box">
            <div class="check-box"><input class="custom-control-input" type="checkbox" :id="'cb' + id" :checked="state" @change="stateChange"></div>
            <label class="goods-img" :for="'cb' + id"><img  :src="pic" alt=""></label>
            <div class="goods-price">
                <div class="goods-title">{{title}}</div>
                <div class="goods-counter">
                    <span> ￥{{price}}</span>
                    <Counter :Coun="count" :id="id"></Counter>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Counter from '@/components/Counter/Counter.vue'
export default {
    components: {
        Counter
    },
    props: {
        id: {
            type: Number,
            default: 0
        },
        pic: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        price: {
            type: Number,
            default: 0
        },
        state: {
            type: Boolean,
            default: true
        },
        count: {
            type: Number,
            default: 0
        }
    },
    methods: {
        stateChange(e){
            const newState = e.target.checked;
            this.$emit('stateChange', { id: this.id, value: newState })
        }
    }
}
</script>
<style lang="less" scoped>
.goods-box{
    display: flex;
    align-items: center;
    height: 120px;
    margin-bottom: 6px;
    .check-box{
        input{ width: 16px; height: 16px;}
    }
    .goods-img{
        img{
            width: 120px;
            height: 120px;
        }
    }
    .goods-price{
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        margin-left: 10px;
        span:nth-child(2){ color: red;}
        .goods-counter{
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
        }
    }
}
</style>